<template name="accountPreferences">
	<section class="preferences-page preferences-page--new page-container page-home page-static page-settings">
		{{#header sectionName="Preferences" buttons=true fullpage=true}}
		<div class="rc-header__section-button">
			<button class="rc-button rc-button--primary save"><span>{{_ "Save_changes"}}</span></button>
		</div>
		{{/header}}

		<div class="content">
			<form id="preferences" autocomplete="off">
				<div class="section">
					<h1>{{_ "Localization"}}</h1>
					<div class="section-content border-component-color">
						<div class="input-line double-col">
							<label for="language" class="setting-label">{{_ "Language"}}</label>
							<div class="rc-select setting-field">
								<select id="language" class="required rc-select__element">
									{{#each languages}}
										<option value="{{key}}" selected="{{isUserLanguage key}}" dir="auto">{{name}}</option>
									{{/each}}
								</select>
								{{> icon block="rc-select__arrow" icon="arrow-down"}}
							</div>
						</div>
					</div>
				</div>
				<div class="section">
					<h1>{{_ "Global"}}</h1>
					<div class="section-content border-component-color">
						<div class="input-line double-col">
							<label for="dont-ask" class="setting-label">{{_ "Dont_ask_me_again_list"}}</label>
							<div class="rc-select setting-field">
								<select id="dont-ask" class="rc-select__element" multiple>
									{{#each dontAskAgainList}}
										<option value="{{action}}">{{label}}</option>
									{{/each}}
								</select>
							</div>
							<button class="rc-button rc-button--cancel setting-action js-dont-ask-remove">{{_ "Remove"}}</button>
						</div>
					</div>
				</div>
				<div class="section">
					<h1>{{_ "User_Presence"}}</h1>
					<div class="section-content border-component-color">
						<div class="input-line double-col" id="enableAutoAway">
							<label class="setting-label">{{_ "Enable_Auto_Away"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="enableAutoAway" value="true" checked="{{ checked 'enableAutoAway' true }}"/> {{_ "True"}}</label>
								<label><input type="radio" name="enableAutoAway" value="false" checked="{{ checked 'enableAutoAway' false }}"/> {{_ "False"}}</label>
							</div>
						</div>

						<div class="input-line double-col" id="idleTimeLimit">
							<label class="setting-label">{{_ "Idle_Time_Limit"}}</label>
							<div class="setting-field">
								{{#if idleTimeLimit}}
									<input type="number" class="rc-input__element" name="idleTimeLimit" min="0" value="{{idleTimeLimit}}">
								{{else}}
									<input type="number" class="rc-input__element" name="idleTimeLimit" min="0" value="" placeholder="{{_ "Use_Global_Settings"}} ({{defaultIdleTimeLimit}})">
								{{/if}}
								<div class="settings-description secondary-font-color">{{_ "Idle_Time_Limit_Description"}}</div>
							</div>
						</div>
					</div>

				</div>
				<div class="section">
					<h1>{{_ "Notifications"}}</h1>
					<div class="section-content border-component-color">
						<div class="input-line double-col">
							<label class="setting-label">{{_ "Desktop_Notifications"}}</label>
							<div class="setting-field">
								<div>
									{{#if desktopNotificationEnabled}}
										<label>{{_ "Desktop_Notifications_Enabled"}}</label>
									{{else}}
										{{#if desktopNotificationDisabled}}
											<label>{{_ "Desktop_Notifications_Disabled"}}</label>
										{{else}}
											<label>{{_ "Desktop_Notifications_Not_Enabled"}}</label>
										{{/if}}
									{{/if}}
								</div>

								{{#if desktopNotificationEnabled}}
									<button type="button" class="rc-button rc-button--primary js-test-notifications">{{_ "Test_Desktop_Notifications"}}</button>
								{{else}}
									{{#unless desktopNotificationDisabled}}
										<button type="button" class="rc-button rc-button--primary js-enable-notifications">{{_ "Enable_Desktop_Notifications"}}</button>
									{{/unless}}
								{{/if}}
							</div>
						</div>
						<div class="input-line double-col">
							<label class="setting-label">{{_ "Notification_Duration"}}</label>
							<div class="setting-field">
								{{#if desktopNotificationDuration}}
									<input type="number" class="rc-input__element" name="desktopNotificationDuration" min="0" value="{{desktopNotificationDuration}}">
								{{else}}
									<input type="number" class="rc-input__element" name="desktopNotificationDuration" min="0" value="" placeholder="{{_ "Use_Global_Settings"}} ({{defaultDesktopNotificationDuration}})">
								{{/if}}
							</div>
						</div>
						<div class="input-line double-col" id="unreadAlert">
							<label class="setting-label">{{_ "Notification_RequireInteraction"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="desktopNotificationRequireInteraction" value="true" checked="{{checked 'desktopNotificationRequireInteraction' true}}"/> {{_ "On"}}</label>
								<label><input type="radio" name="desktopNotificationRequireInteraction" value="false" checked="{{checked 'desktopNotificationRequireInteraction' false}}"/> {{_ "Off"}}</label>
								<div class="settings-description secondary-font-color">{{_ "Only_works_with_chrome_version_greater_50"}}</div>
							</div>
						</div>
						<div class="input-line double-col" id="desktopNotifications">
							<label class="setting-label">{{_ "Notification_Desktop_Default_For"}}</label>
							<div class="rc-select setting-field">
								<select class="input-monitor rc-select__element" name="desktopNotifications">
									<option value="default" selected="{{selected 'desktopNotifications' 'default' 'default'}}">{{_ "Default"}} ({{_ defaultDesktopNotification}})</option>
									<option value="all" selected="{{selected 'desktopNotifications' 'all' 'default'}}">{{_ "All_messages"}}</option>
									<option value="mentions" selected="{{selected 'desktopNotifications' 'mentions' 'default'}}">{{_ "Mentions"}}</option>
									<option value="nothing" selected="{{selected 'desktopNotifications' 'nothing' 'default'}}">{{_ "Nothing"}}</option>
								</select>
								{{> icon block="rc-select__arrow" icon="arrow-down" }}
							</div>
						</div>
						<div class="input-line double-col" id="mobileNotifications">
							<label class="setting-label">{{_ "Notification_Mobile_Default_For"}}</label>
							<div class="rc-select setting-field">
								<select class="input-monitor rc-select__element" name="mobileNotifications">
									<option value="default" selected="{{selected 'mobileNotifications' 'default' 'default'}}">{{_ "Default"}} ({{_ defaultMobileNotification}})</option>
									<option value="all" selected="{{selected 'mobileNotifications' 'all' 'default'}}">{{_ "All_messages"}}</option>
									<option value="mentions" selected="{{selected 'mobileNotifications' 'mentions' 'default'}}">{{_ "Mentions"}}</option>
									<option value="nothing" selected="{{selected 'mobileNotifications' 'nothing' 'default'}}">{{_ "Nothing"}}</option>
								</select>
								{{> icon block="rc-select__arrow" icon="arrow-down" }}
							</div>
						</div>
						<div class="input-line double-col" id="emailNotificationMode">
							<label class="setting-label">{{_ "Email_Notification_Mode"}}</label>
							<div class="setting-field">
								{{#with canChange=emailNotificationsAllowed}}
									<div class="rc-select">
										<select class="input-monitor rc-select__element" name="emailNotificationMode" {{ifThenElse canChange '' 'disabled'}}>
											<option value="default" selected="{{selected 'emailNotificationMode' 'default' 'default'}}">{{_ "Default"}} ({{_ defaultEmailNotification}})</option>
											<option value="nothing" selected="{{selected 'emailNotificationMode' 'nothing'}}">{{_ "Email_Notification_Mode_Disabled"}}</option>
											<option value="mentions" selected="{{selected 'emailNotificationMode' 'mentions'}}">{{_ "Email_Notification_Mode_All"}}</option>
										</select>
										{{> icon block="rc-select__arrow" icon="arrow-down" }}
									</div>
									{{#if canChange}}
										<div class="settings-description secondary-font-color">{{_ "You_need_to_verifiy_your_email_address_to_get_notications"}}</div>
									{{else}}
										<div class="info">{{_ "Email_Notifications_Change_Disabled"}}</div>
									{{/if}}
								{{/with}}
							</div>
						</div>
					</div>
				</div>
				<div class="section">
					<h1>{{_ "Messages"}}</h1>
					<div class="section-content border-component-color">
						<div class="input-line double-col" id="unreadAlert">
							<label class="setting-label">{{_ "Unread_Tray_Icon_Alert"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="unreadAlert" value="true" checked="{{checked 'unreadAlert' true}}"/> {{_ "On"}}</label>
								<label><input type="radio" name="unreadAlert" value="false" checked="{{checked 'unreadAlert' false}}"/> {{_ "Off"}}</label>
							</div>
						</div>
						<div class="input-line double-col" id="clockMode">
							<label class="setting-label">{{_ "Message_TimeFormat"}}</label>
							<div class="setting-field">
								<div class="rc-select">
									<select class="input-monitor rc-select__element" name="clockMode">
										<option value="0" selected="{{selected 'clockMode' 0}}">{{_ "Default"}}</option>
										<option value="1" selected="{{selected 'clockMode' 1}}">{{_ "12_Hour"}}</option>
										<option value="2" selected="{{selected 'clockMode' 2}}">{{_ "24_Hour"}}</option>
									</select>
									{{> icon block="rc-select__arrow" icon="arrow-down" }}
								</div>
							</div>
						</div>
						<div class="input-line double-col">
							<label class="setting-label">{{_ "Use_Emojis"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="useEmojis" value="true" checked="{{checked 'useEmojis' true}}" /> {{_ "True"}}</label>
								<label><input type="radio" name="useEmojis" value="false" checked="{{checked 'useEmojis' false}}" /> {{_ "False"}}</label>
							</div>
						</div>
						<div class="input-line double-col" id="convertAsciiEmoji">
							<label class="setting-label">{{_ "Convert_Ascii_Emojis"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="convertAsciiEmoji" value="true" checked="{{checked 'convertAsciiEmoji' true}}" /> {{_ "True"}}</label>
								<label><input type="radio" name="convertAsciiEmoji" value="false" checked="{{checked 'convertAsciiEmoji' false}}" /> {{_ "False"}}</label>
							</div>
						</div>
						<div class="input-line double-col" id="autoImageLoad">
							<label class="setting-label">{{_ "Auto_Load_Images"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="autoImageLoad" value="true" checked="{{checked 'autoImageLoad' true}}" /> {{_ "True"}}</label>
								<label><input type="radio" name="autoImageLoad" value="false" checked="{{checked 'autoImageLoad' false}}" /> {{_ "False"}}</label>
							</div>
						</div>
						<div class="input-line double-col" id="saveMobileBandwidth">
							<label class="setting-label">{{_ "Save_Mobile_Bandwidth"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="saveMobileBandwidth" value="true" checked="{{checked 'saveMobileBandwidth' true}}" /> {{_ "True"}}</label>
								<label><input type="radio" name="saveMobileBandwidth" value="false" checked="{{checked 'saveMobileBandwidth' false}}" /> {{_ "False"}}</label>
							</div>
						</div>
						<div class="input-line double-col" id="collapseMediaByDefault">
							<label class="setting-label">{{_ "Collapse_Embedded_Media_By_Default"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="collapseMediaByDefault" value="true" checked="{{checked 'collapseMediaByDefault' true}}" /> {{_ "True"}}</label>
								<label><input type="radio" name="collapseMediaByDefault" value="false" checked="{{checked 'collapseMediaByDefault' false}}" /> {{_ "False"}}</label>
							</div>
						</div>
						<div class="input-line double-col" id="hideUsernames">
							<label class="setting-label">{{_ "Hide_usernames"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="hideUsernames" value="true" checked="{{checked 'hideUsernames' true}}" /> {{_ "True"}}</label>
								<label><input type="radio" name="hideUsernames" value="false" checked="{{checked 'hideUsernames' false}}" /> {{_ "False"}}</label>
							</div>
						</div>
						{{#if showRoles}}
							<div class="input-line double-col" id="hideRoles">
								<label class="setting-label">{{_ "Hide_roles"}}</label>
								<div class="setting-field">
									<label><input type="radio" name="hideRoles" value="true" checked="{{checked 'hideRoles' true}}" /> {{_ "True"}}</label>
									<label><input type="radio" name="hideRoles" value="false" checked="{{checked 'hideRoles' false}}" /> {{_ "False"}}</label>
								</div>
							</div>
						{{/if}}
						<div class="input-line double-col" id="hideFlexTab">
							<label class="setting-label">{{_ "Hide_flextab"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="hideFlexTab" value="true" checked="{{checked 'hideFlexTab' true}}" /> {{_ "True"}}</label>
								<label><input type="radio" name="hideFlexTab" value="false" checked="{{checked 'hideFlexTab' false}}" /> {{_ "False"}}</label>
							</div>
						</div>
						<div class="input-line double-col" id="hideAvatars">
							<label class="setting-label">{{_ "Hide_Avatars"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="hideAvatars" value="true" checked="{{checked 'hideAvatars' true}}"/> {{_ "True"}}</label>
								<label><input type="radio" name="hideAvatars" value="false" checked="{{checked 'hideAvatars' false}}"/> {{_ "False"}}</label>
							</div>
						</div>

						<div class="input-line double-col" id="sidebarHideAvatar">
							<label class="setting-label">{{_ "Hide_Avatars_Sidebar"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="sidebarHideAvatar" value="true" checked="{{checked 'sidebarHideAvatar' true}}"/> {{_ "True"}}</label>
								<label><input type="radio" name="sidebarHideAvatar" value="false" checked="{{checked 'sidebarHideAvatar' false}}"/> {{_ "False"}}</label>
							</div>
						</div>
						<div class="input-line double-col" id="messageViewMode">
							<label class="setting-label">{{_ "View_mode"}}</label>
							<div class="setting-field">
								<div class="rc-select">
									<select class="input-monitor rc-select__element" name="messageViewMode">
										<option value="0" selected="{{selected 'messageViewMode' 0}}">{{_ "Normal"}}</option>
										<option value="1" selected="{{selected 'messageViewMode' 1}}">{{_ "Cozy"}}</option>
										<option value="2" selected="{{selected 'messageViewMode' 2}}">{{_ "Compact"}}</option>
									</select>
									{{> icon block="rc-select__arrow" icon="arrow-down" }}
								</div>
								<div class="settings-description secondary-font-color">{{_ "Message_view_mode_info"}}</div>
							</div>
						</div>
						<div class="input-line double-col" id="sendOnEnter">
							<label class="setting-label">{{_ "Enter_Behaviour"}}</label>
							<div class="setting-field">
								<div class="rc-select">
									<select class="input-monitor rc-select__element" name="sendOnEnter">
										<option value="normal" selected="{{selected 'sendOnEnter' 'normal'}}">{{_ "Enter_Normal"}}</option>
										<option value="alternative" selected="{{selected 'sendOnEnter' 'alternative'}}">{{_ "Enter_Alternative"}}</option>
										<option value="desktop" selected="{{selected 'sendOnEnter' 'desktop'}}">{{_ "Only_On_Desktop"}}</option>
									</select>
									{{> icon block="rc-select__arrow" icon="arrow-down" }}
								</div>
								<div class="settings-description secondary-font-color">{{_ "Enter_Behaviour_Description"}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="section">
					<h1>{{_ "Sidebar"}}</h1>
					<div class="section-content border-component-color">
						<div class="input-line double-col" id="sidebarShowDiscussion">
							<label class="setting-label">{{_ "Group_discussions"}}</label>
							<div>
								<label><input type="radio" name="sidebarShowDiscussion" value="true" checked="{{checked 'sidebarShowDiscussion' true}}"/> {{_ "True"}}</label>
								<label><input type="radio" name="sidebarShowDiscussion" value="false" checked="{{checked 'sidebarShowDiscussion' false}}"/> {{_ "False"}}</label>
							</div>
						</div>
					</div>
				</div>
				<div class="section">
					<h1>{{_ "Highlights"}}</h1>
					<div class="section-content border-component-color">
						<div class="input-line double-col">
							<label class="setting-label">{{_ "Highlights_List"}}</label>
							<div class="setting-field">
								<textarea class="rc-input__element" name="highlights" id="highlights" cols="30" rows="10">{{highlights}}</textarea>
								<div class="settings-description secondary-font-color">{{_ "Highlights_How_To"}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="section">
					<h1>{{_ "Sound"}}</h1>
					<div class="section-content border-component-color">
						<div class="input-line double-col">
							<label class="setting-label">{{_ "New_Room_Notification"}}</label>
							<div class="rc-select setting-field">
								<select name="newRoomNotification" class="audio rc-select__element">
									<option value="none" selected="{{$eq newRoomNotification 'none'}}">{{_ "None"}}</option>
									<option value="door" selected="{{$eq newRoomNotification 'door'}}">Door ({{_ "Default"}})</option>
									{{#each audioAssets}}
										<option value="{{_id}}" selected="{{$eq newRoomNotification _id}}">{{name}}</option>
									{{/each}}
								</select>
								{{> icon block="rc-select__arrow" icon="arrow-down" }}
							</div>
						</div>
						<div class="input-line double-col">
							<label class="setting-label">{{_ "New_Message_Notification"}}</label>
							<div class="rc-select setting-field">
								<select name="newMessageNotification" class="audio rc-select__element">
									<option value="none" selected="{{$eq newMessageNotification 'none'}}">{{_ "None"}}</option>
									<option value="chime" selected="{{$eq newMessageNotification 'chime'}}">Chime ({{_ "Default"}})</option>
									{{#each audioAssets}}
										<option value="{{_id}}" selected="{{$eq newMessageNotification _id}}">{{name}}</option>
									{{/each}}
								</select>
								{{> icon block="rc-select__arrow" icon="arrow-down" }}
							</div>
						</div>
						<div class="input-line double-col" id="muteFocusedConversations">
							<label class="setting-label">{{_ "Mute_Focused_Conversations"}}</label>
							<div class="setting-field">
								<label><input type="radio" name="muteFocusedConversations" value="true" checked="{{checked 'muteFocusedConversations' true}}"/> {{_ "True"}}</label>
								<label><input type="radio" name="muteFocusedConversations" value="false" checked="{{checked 'muteFocusedConversations' false}}"/> {{_ "False"}}</label>
							</div>
						</div>
						<div class="input-line double-col">
							<label class="setting-label">{{_ "Notifications_Sound_Volume"}}</label>
							<div class="setting-field">
								{{> slider id="notificationsSoundVolume" min="0" max="100" value=notificationsSoundVolume}}
							</div>
						</div>
					</div>
				</div>

				{{#if userDataDownloadEnabled}}
					<div class="section">
						<h1>{{_ "My Data"}}</h1>
						<div class="section-content border-component-color">
							<div class="input-line double-col">
								<button class="rc-button setting-action download-my-data"><i class="icon-download secondary-font-color"></i> <span>{{_ "Download_My_Data"}}</span></button>
								<button class="rc-button setting-action export-my-data"><i class="icon-download secondary-font-color"></i> <span>{{_ "Export_My_Data"}}</span></button>
							</div>
						</div>
					</div>
				{{/if}}
			</form>
		</div>
	</section>
</template>
